<template>
  <Title title="各组报工工时（周）" style="margin-top: 8px" type="sort" />
  <div class="wrapper">
    <dc-chat :options="columnarOptions"></dc-chat>
  </div>
</template>
<script setup>
import { reactive, ref, toRefs } from 'vue';
import Api from '@/api/index';
import Title from '../component/title.vue';

const data = reactive({
  columnarOptions: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      show: true,
      fontSize: '8px',
      textStyle: {
        color: '#fff',
        fontSize: '10px',
      },
    },
    grid: {
      left: '0%',
      top: '20%',
      right: '0%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
      data: ['10/01', '10/02'],
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#666',
        },
      },
      axisLabel: {
        color: '#EAF0FF', // Y轴标签颜色设置为洋红色
        lineStyle: {
          type: 'dashed', // 设置虚线
          color: '#666',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#666',
        },
      },
      axisLabel: {
        color: '#EAF0FF', // Y轴标签颜色设置为洋红色
        lineStyle: {
          type: 'dashed', // 设置虚线
          color: '#000',
        },
      },
    },
    series: [
      {
        name: '小组一',
        type: 'line',
        data: [12, 425],
      },
      {
        name: '小组二',
        type: 'line',
        data: [122, 425],
      },
      {
        name: '小组三',
        type: 'line',
        data: [12, 45],
      },
    ],
  },
});

const { columnarOptions } = toRefs(data);
const getApi = async () => {
  const res = await Api.mps.commandRoom.reportwork();
  const { code, data } = res.data;
  if (code == 200) {
    let data = {
      time: ['10/01', '10/02'],
      series: [
        {
          name: '小组一',
          data: [12, 425],
        },
        {
          name: '小组二',
          data: [121, 45],
        },
        {
          name: '小组三',
          data: [42, 422],
        },
      ],
    };
    columnarOptions.value.xAxis.data = data.time;
    columnarOptions.value.series = data.series;
  }
};

defineExpose({
  getApi,
});
</script>

<style lang="scss" scoped>
.wrapper {
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  z-index: 99;
  height: 174px;
  display: flex;
  flex-direction: column;
  padding: 9px 13px;
  box-sizing: border-box;
  background: rgba(59, 97, 157, 0.2);
}
</style>
